<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->
<!--    <div>-->
<!--        <p>标题</p>-->
<!--        <p>内容</p>-->
<!--        <p>{{ str1 }}</p>-->
<!--        <p>爱好</p>-->
<!--        {% for item in list1 %}-->
<!--        <p>-->
<!--        {{item}}-->
<!--        </p>-->
<!--        {% endfor %}-->
<!--    </div>-->
<!--</body>-->
<!--</html>-->



<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->
<!--</head>-->
<!--<body>-->
<!--<div>-->
<!--    <form method="post" action="addTodo">-->
<!--        <input name="content" placeholder="请输入你的爱好" />-->
<!--        <button type="submit">新增</button>-->
<!--    </form>-->

<!--    <p>我的爱好爱好</p>-->
<!--    {% for item in list1 %}-->
<!--    <p>-->
<!--        {{item.content}}-->
<!--    </p>-->
<!--    {% endfor %}-->
<!--</div>-->
<!--</body>-->
<!--</html>-->


<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Title</title>-->

<!--</head>-->
<!--<body>-->
<!--<div>-->
<!--    <form method="post" action="addTodo">-->
<!--        <input name="content" placeholder="请输入你的爱好" />-->
<!--        <button type="submit">新增</button>-->
<!--    </form>-->

<!--    <p>我的爱好爱好</p>-->
<!--    {% for item in list1 %}-->
<!--    <p>-->
<!--        {{item.content}} <a href="javascript:;" onclick="del({{item.id}})" >删除</a>-->
<!--    </p>-->
<!--    {% endfor %}-->
<!--</div>-->
<!--</body>-->
<!--<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">-->
<!--</script>-->
<!--<script>-->
<!--    function del(id){-->
<!--        console.log('id',id);-->
<!--        $.ajax({-->
<!--            method: "post",-->
<!--            url: "delTodo",-->
<!--            data: {-->
<!--                id-->
<!--            },-->
<!--            success(res){-->
<!--                console.log('res',res, typeof  res);-->
<!--                if(res.status == 200){-->
<!--                    alert(res.msg);-->
<!--                    location.reload();-->
<!--                }-->
<!--            },-->
<!--        })-->
<!--    }-->
<!--</script>-->

<!--</html>-->


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div>
    <form method="post" action="addTodo">
        <input name="content" placeholder="请输入你的爱好" />
        <button type="submit">新增</button>
    </form>

    <p>我的爱好爱好</p>
    {% for item in list1 %}
    <p>
        <input name="content"  value="{{item.content}}" placeholder="请输入你的爱好" />
        <a href="javascript:;" data-id="{{item.id}}" class="update" >保存</a>
        <a href="javascript:;" onclick="del({{item.id}})" >删除</a>
    </p>
    {% endfor %}
</div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    function del(id){
        // console.log('id',id);
        $.ajax({
            method: "post",
            url: "delTodo",
            data: {
                id
            },
            success(res){
                // console.log('res',res, typeof  res);
                if(res.status == 200){
                    // alert(res.msg);
                    location.reload();
                }
            },
        })
    }

    $('.update').click(function(){
        var content = $(this).prev().val();
        var id = $(this).data('id');
        $.ajax({
            method: "post",
            url: "updateTodo",
            data: {
                id,content
            },
            success(res){
                // console.log('res',res, typeof  res);
                if(res.status == 200){
                    // alert(res.msg);
                    location.reload();
                }
            },
        })
    })

    function update(id){
        console.log('id',id);
        $.ajax({
            method: "post",
            url: "delTodo",
            data: {
                id
            },
            success(res){
                console.log('res',res, typeof  res);
                if(res.status == 200){
                    alert(res.msg);
                    location.reload();
                }
            },
        })
    }

</script>

</html>
